import React, { useState, useEffect, useRef } from 'react';
import { Toast, Dialog, Picker } from 'antd-mobile'
import "./index.less"

function Index ({ type, placeholderTxt, basicColumns, setSelectVal, defaultValue }) {
    const [visible, setVisible] = useState(false)
    const [value, setValue] = useState([])

    useEffect(() => {
        defaultValue && setValue([defaultValue])
        setSelectVal([defaultValue])
    }, [defaultValue])
    // {value.length ? value[0] : placeholderTxt}

    return (
        <div className='select-line'>
            <div className="s-init" onClick={() => {
                setVisible(true)
            }}>
                {
                    !value.length ? placeholderTxt : (type == 'from' ? basicColumns[0].find(el => el.value == value)?.label : value[0])
                }
            </div>

            <Picker
                columns={basicColumns}
                visible={visible}
                defaultValue={defaultValue}
                onClose={() => {
                    setVisible(false)
                }}
                style={{
                    '--item-height': '30px'
                }}
                value={value}
                onConfirm={v => {
                    setValue(v)
                    setSelectVal(v)
                }}
            />
        </div>
    );
}

export default Index;
